<template>
  <div>
    <BasicTable @register="registerTable" @resize-column="handleResizeColumn">
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.key === 'realName'">
          <span
            class="hover:underline cursor-pointer"
            @click="handleClickRealName(record)"
            v-if="type === 'MonthlyPerformanceStatistics'"
          >
            {{ text }}
          </span>
          <span v-else>{{ text }}</span>
        </template>
      </template>
      <template #toolbar>
        <a-button type="primary" @click="handleExport" :loading="exportLoading"> 导出 </a-button>
        <template v-if="type === 'MonthlyPerformanceStatistics'">
          <a-button type="primary" @click="handleCharts('1')"> 月统计 </a-button>
          <a-button type="primary" @click="handleCharts('2')"> 年统计 </a-button>
          <a-button type="primary" @click="handleCharts('3')"> 人员月统计 </a-button>
          <a-button type="primary" @click="handleCharts('4')"> 人员年统计 </a-button>
        </template>
      </template>
    </BasicTable>
    <ChartsDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, unref, watch, inject, nextTick } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useDrawer } from '/@/components/Drawer';
  import ChartsDrawer from './modules/ChartsDrawer.vue';
  import { columns, searchFormSchema } from './statisticsTable.data';
  import { downloadByData } from '/@/utils/file/download';

  import {
    getFlowStatperFormanceListByDept,
    getFlowStatPerformanceListCountByDept,
    getFlowStatPerformanceListAverageByDept,
    getFlowStatExportListByDept,
    getFlowStatExportListCountByDept,
    getFlowStatExportListAverageByDept,
  } from '/@/api/flowManage/flowManage';
  import { useGo } from '/@/hooks/web/usePage';

  export default defineComponent({
    name: 'StatisticsTable',
    components: { BasicTable, ChartsDrawer },
    props: {
      tableName: {
        type: String,
        default: '',
      },
      type: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      const [registerDrawer, { openDrawer }] = useDrawer();

      onMounted(async () => {});

      const deptCode = inject('deptCode');
      console.log('inject-deptCode', deptCode);
      const searchInfoData = ref({});
      watch(
        () => deptCode,
        async () => {
          console.log('inject-deptCode222', deptCode);
          console.log('props.type', props.type);
          if (unref(deptCode)) {
            await nextTick();
            fetch();
          }
        },
        {
          immediate: true,
          deep: true,
        },
      );

      const fetch = () => {
        reload();
      };

      const [registerTable, { reload, setProps, redoHeight }] = useTable({
        title: props.tableName,
        api:
          props.type === 'MonthlyPerformanceStatistics'
            ? getFlowStatperFormanceListByDept
            : props.type === 'MonthlyProcessProcessingTimes'
            ? getFlowStatPerformanceListCountByDept
            : getFlowStatPerformanceListAverageByDept,
        columns,
        formConfig: {
          labelWidth: 40,
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
        },
        searchInfo: {
          op: 'search',
          action: 'export',
        }, //额外的参数
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        indexColumnProps: { width: 50 },
        showIndexColumn: true,
        immediate: false,
        beforeFetch: (info) => {
          let newInfo = info;
          if (unref(deptCode)) {
            newInfo.deptCode = unref(deptCode);
          }
          searchInfoData.value = newInfo;
          return newInfo;
        },
      });

      const exportLoading = ref(false);
      async function handleExport() {
        console.log('getPaginationRef', searchInfoData.value);
        let req =
          props.type === 'MonthlyPerformanceStatistics'
            ? getFlowStatExportListByDept
            : props.type === 'MonthlyProcessProcessingTimes'
            ? getFlowStatExportListCountByDept
            : getFlowStatExportListAverageByDept;
        let title = '导出表.xls';
        try {
          exportLoading.value = true;
          const { headers, data } = await req(unref(searchInfoData));
          console.log('res', { headers, data });
          if (headers['content-disposition']) {
            title = decodeURIComponent(headers['content-disposition'].split('=').pop());
          }
          console.log('title', title);
          if (data) {
            downloadByData(data, title);
          }
        } catch (err) {
          console.error('handleExport', err);
        } finally {
          exportLoading.value = false;
        }
      }
      //统计
      const handleCharts = (type) => {
        openDrawer(true, { type, deptCode: unref(deptCode) });
      };

      const go = useGo();
      //点击名称
      const handleClickRealName = (record) => {
        console.log('record', record);
        go({
          path: '/personStatisticsTable',
          query: {
            userName: record.userName,
          },
        });
      };

      const handleSuccess = () => {};
      return {
        registerTable,
        registerDrawer,
        handleExport,
        handleResizeColumn: (w, col) => {
          col.width = w;
        },
        handleCharts,
        handleSuccess,
        exportLoading,
        handleClickRealName,
      };
    },
  });
</script>
